<template>
	<div class="chartsWrap">
		<div class="chartsWrap">
	    	<div class="headline">			  	    	 	 
	    	 	 <span class="title">
	    	 	 	<i class="el-icon-s-marketing"></i>	    	 	 	
	    	 	 	水晶图
	    	 	 </span>			  	    	 	 
	    	</div>  		
			<e-chart :options="option"  class="charts"></e-chart>
		</div>				
	</div>
</template>

<script>
	export default {
		data() {
			return {
				timer: null,
				option: {
					// 标题
					title: {
						// 标题文本 注意这边定义了一个 a|% a相当于变量 % 就是值
						text: (0.2 * 100).toFixed(0) + '{a|%}',
						// 标题样式
						textStyle: {
							fontSize: 50,
							fontFamily: 'yjsz',
							fontWeight: 'bold',
							color: '#bcb8fb',
							// 定义富文本标签样式  这边就是那个%
							rich: {
								a: {
									fontSize: 50,
								}
							}
						},
						// 距离左边的宽度  等同于 left
						x: 'center',
						// 距离顶部的高度 等同于 top
						y: '35%',
						// backgroundColor: '#03dbdb'//文字区域的背景颜色
					},
					// 原生图形元素组件
					graphic: {
						// 里面是所有图形元素的集合 这边对应的是 [流量统计] 这段文字
						elements: [{
							type: 'group',
							left: 'center',
							top: '60%',
							children: [{
								type: 'text',
								style: {
									fill: '#aab2fa',
									text: '流量统计',
									font: '20px Microsoft YaHei'
								}
							}]
						}]
					},
					series: [{
						type: 'liquidFill',
						radius: '80%', // 环的大小
						center: ['50%', '50%'], // 图形位置
						data: [0.1, 0.1, 0.1], // 数据是个数组 数组的每一项的值是0-1
						// 设置图表的背景色
						backgroundStyle: {
							// 设置颜色为线性渐变 
							// 前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，(可以设置倾斜角度)
							// 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: 'rgba(68, 145, 253, 0.3)'
									}, {
										offset: 0.5,
										color: 'rgba(68, 145, 253, .75)'
									},
									{
										offset: 1,
										color: 'rgba(68, 145, 253, 0.8)'
									}
								],
								globalCoord: false
							},
						},
						// 波浪样式
						itemStyle: {
							opacity: 0.5, //波浪的透明度
							shadowBlur: 1, //波浪的阴影范围
							shadowColor: 'rgba(36, 175, 206)' //阴影颜色
						},
						emphasis: {
							itemStyle: {
								//鼠标经过波浪颜色的透明度
								opacity: 1
							}
						},
						// 设置外部轮廓
						outline: {
							show: true, //是否显示轮廓 布尔值
							borderDistance: 0, // 外部轮廓与图表的距离 数字
							itemStyle: {
								borderWidth: 20, // 外部轮廓大小
								// 同上 颜色设置为线性渐变
								borderColor: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: 'rgba(69, 73, 240, 0)'
										},
										{
											offset: 0.5,
											color: 'rgba(69, 73, 240, 0.5)'
										},
										{
											offset: 1,
											color: 'rgba(69, 73, 240, 0.8)'
										}
									],
									globalCoord: false
								},
								shadowBlur: 0, //外部轮廓的阴影范围 一旦设置了内外都有阴影
								shadowColor: '#999', //外部轮廓的阴影颜色
							}
						},
						// 水波的颜色 对应的是data里面值
						color: ['rgba(36, 175, 206)', 'rgba(36, 175, 206)', 'rgba(36, 175, 206)'],
						// 水晶球的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
						shape: 'circle',
						// 波移动的方向 两个参数  left 从右往左 right 从左往右
						direction: 'right',
						//控制波动画的开关  值是布尔值  (初始化的时候会动 动完一个循环就不动了)
						waveAnimation: true,
						// https://echarts.apache.org/examples/zh/editor.html?c=line-easing 动画效果函数
						animationEasing: 'linear', //初始动画
						animationEasingUpdate: 'quarticInOut', //数据更新的动画效果
						animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
						animationDurationUpdate: 300, // 数据更新动画的时长
						// 因为要自定义 所以这边 取消原来的样式
						label: {
							normal: {
								formatter: '',
							}
						},
						// 设置图形的背景色
						// backgroundColor: new this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{offset: 0,color: '#431ab8'}, {offset: 1,color: '#471bba'}])
					}]
				}
			}
		},
		created() {

		},
		beforeDestroy() {

		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped="">
	.chartsWrap {
		height: 100%;display: flex;flex-direction: column;
		.charts{flex: 1;}
		.headline{
				display: flex;
				color: #fff;		
				.title{
			      background: #131420;
			      padding: 8px 15px;
			      display: inline-block;
			      font-size: 14px;
				    box-shadow: inset 0 0 10px 0 rgba(53,145,255,.8);
				    border: 1px solid #3591ff80;          
				}
		}		
	}
</style>